<template>
    <div class="jbxx">
        <div class="container">
            <p style="margin-left: 10px;">工艺路线基本信息</p>
            <el-button type="button" style=" background-color: blueviolet; color: white;">返回</el-button>
        </div>
        <el-form :model="formDatagy" style="margin-left: 20px">
            <!-- 产品基本信息 -->
            <el-row>
                <el-col :span="2"></el-col>
                <el-col :span="3">
                    <el-form-item label="工艺路线编码">
                        <el-input v-model="formDatagy.gy_code" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="3">
                    <el-form-item label="工艺路线名称">
                        <el-input v-model="formDatagy.gy_name" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="3">
                    <el-form-item label="工艺路线类型">
                        <el-input v-model="formDatagy.gy_fl" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="3">
                    <el-form-item label="工艺路线版本">
                        <el-input v-model="formDatagy.gy_bb" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="3">
                    <el-form-item label="工艺路线状态">
                        <el-input v-model="formDatagy.gy_state" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="1"></el-col>
            </el-row>
        </el-form>
        <!-- <el-text>工艺路线名称:</el-text>
            <el-input v-model="formDatagy.gy_name" placeholder="请输入关键字搜索"></el-input>
            <el-text>工艺路线类型:</el-text>
            <el-select placeholder="请选择属性值">
                <el-option label="值1" value="值1"></el-option>
                <el-option label="值2" value="值2"></el-option>
                <el-option label="值3" value="值3"></el-option>
                <el-option label="值4" value="值4"></el-option>
            </el-select>
            <el-text>工艺路线版本:</el-text>
            <el-input placeholder="请输入关键字搜索"></el-input>
            <el-text>工艺路线状态:</el-text>
            <el-select placeholder="请选择属性值">
                <el-option label="值1" value="值1"></el-option>
                <el-option label="值2" value="值2"></el-option>
                <el-option label="值3" value="值3"></el-option>
                <el-option label="值4" value="值4"></el-option>
            </el-select> -->
    </div>

    <div class="pzlc">
        <div class="container">
            <p style="margin-left: 10px;">配置工艺路线流程</p>
            <div>
                <el-button type="button" @click="editRow(row)">保存</el-button>
                <el-button type="button" @click="editRow(row)">重置</el-button>
            </div>
        </div>
        <div class="process-flow">
            <path xmlns="http://www.w3.org/2000/svg"
                d="M 202.054721516887 324.5  C 202.054721516887 324.5  205.7270032528 325.196467225777  205.7270032528 325.196467225777  C 205.7270032528 325.196467225777  223.432282566977 351.5  223.432282566977 351.5  C 223.432282566977 351.5  205.7270032528 377.803532774223  205.7270032528 377.803532774223  C 205.7270032528 377.803532774223  202.054721516887 378.5  202.054721516887 378.5  C 202.054721516887 378.5  84 378.5  84 378.5  C 81.48 378.5  79.5 376.52  79.5 374  C 79.5 374  79.5 329  79.5 329  C 79.5 326.48  81.48 324.5  84 324.5  C 84 324.5  202.054721516887 324.5  202.054721516887 324.5  Z "
                stroke-width="1" stroke="#00b0c0" fill="none" />
            <div>
                <div v-for="(step, index) in steps" :key="index" class="step-container">
                    <div class="step-header" @click="showStepContent(index)">
                        工序 {{ step.name }}
                        <button @click.stop="removeStep(index)" class="remove-button">X</button>
                    </div>
                </div>
                <button @click="addStep" class="add-button">+</button>
            </div>
        </div>
        <el-form :model="formDatagy" style="margin-left: 20px">
            <!-- 产品基本信息 -->
            <el-row>
                <el-col :span="1"></el-col>
                <el-col :span="4">
                    <el-form-item label="工序编码">
                        <el-input v-model="formDatagy.gy_code" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="4">
                    <el-form-item label="工序名称">
                        <el-input v-model="formDatagy.gy_name" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="4">
                    <el-form-item label="报工方式">
                        <el-input v-model="formDatagy.gy_name" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="4">
                    <el-form-item label="工序类型">
                        <el-input v-model="formDatagy.gy_code" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="1"></el-col>
            </el-row>
            <el-row>
                <el-col :span="1"></el-col>
                <el-col :span="4">
                    <el-form-item label="待工时间">
                        <el-input v-model="formDatagy.gy_code" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="4">
                    <el-form-item label="标准工时">
                        <el-input v-model="formDatagy.gy_name" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="4">
                    <el-form-item label="产出品">
                        <el-input v-model="formDatagy.gy_name" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="4">
                    <el-form-item label="质检标准">
                        <el-input v-model="formDatagy.gy_code" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="1"></el-col>
            </el-row>
            <el-row>
                <el-col :span="1"></el-col>
                <el-col :span="6">
                    <el-form-item label="工艺文件">
                        <el-input v-model="formDatagy.gy_code" readonly placeholder="请输入产品编码" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>

    <div class="bgxs">
        <div class="bg">
            <div class="container">
                <p style="margin-left: 10px;">生产位置</p>
                <el-button type="button" style=" background-color: #2f86f6; color: white;">添加</el-button>
            </div>
            <el-table :data="productDetailsData" border class="eltable">
                <el-table-column prop="id" label="生产单元编码" width="140"></el-table-column>
                <el-table-column prop="cp_code" label="生产单元名称"></el-table-column>
                <el-table-column prop="cp_name" label="生产单元类型"></el-table-column>
                <el-table-column prop="cp_xh" label="负责人"></el-table-column>
                <el-table-column prop="cp_shu" label="操作" width="120"></el-table-column>
            </el-table>
        </div>
        <div class="bg">
            <div class="container">
                <p style="margin-left: 10px;">生产人员</p>
                <el-button type="button" style=" background-color: #2f86f6; color: white;">添加</el-button>
            </div>
            <el-table :data="productDetailsData" border class="eltable">
                <el-table-column prop="id" label="用户名" width="140"></el-table-column>
                <el-table-column prop="cp_code" label="项目"></el-table-column>
                <el-table-column prop="cp_name" label="所属部门"></el-table-column>
                <el-table-column prop="cp_xh" label="任职岗位"></el-table-column>
                <el-table-column prop="cp_shu" label="操作" width="120"></el-table-column>
            </el-table>
        </div>
        <div class="bg">
            <div class="container">
                <p style="margin-left: 10px;">物料需求</p>
            </div>
            <el-table :data="productDetailsData" border class="eltable">
                <el-table-column prop="id" label="物料名称" width="140"></el-table-column>
                <el-table-column prop="cp_code" label="物料编码"></el-table-column>
                <el-table-column prop="cp_name" label="物料编码"></el-table-column>
                <el-table-column prop="cp_xh" label="物料单位"></el-table-column>
                <el-table-column prop="cp_shu" label="需求数量" width="120"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useRoute } from 'vue-router';

export default {
    setup() {
        const formDatagy = ref({
            gy_code: '',
            gy_name: '',
            gy_fl: '',
            gy_bb: '',
            gy_state: ''
        });
        const route = useRoute();
        const productDetailsData = ref([]);



        // 获取数据  
        const fetchData = async () => {
            formDatagy.value.gy_code = route.query.gy_code;
            try {
                const res = await axios.get('/api/Mbd_GY/GetMbd_GYCode?gy_code=' + formDatagy.value.gy_code);
                if (formDatagy.value.gy_name !== res.data.gy_name) {
                    setTimeout(() => {
                        requestAnimationFrame(() => {
                            formDatagy.value.gy_name = res.data.gy_name;
                            formDatagy.value.gy_fl = res.data.gy_fl;
                            formDatagy.value.gy_bb = res.data.gy_bb;
                            formDatagy.value.gy_state = res.data.gy_state;
                        });
                    }, 100);
                }
            } catch (error) {
                ElMessage.error('数据获取失败');
            }
        };

        const editRow = (row) => {
            console.log('编辑行:', row);
        };
        onMounted(() => {
            fetchData();
        });
        return {
            formDatagy,
            route,
            productDetailsData,
            editRow,
            steps: [
                { name: '1', content: '这是工艺一的内容' },
                // 你可以在这里预填充更多的工序
            ],
            activeStepIndex: 0, // 当前显示的工序索引
        };
    }
};
</script>

<style scoped>
.template {
    width: 100%;
    height: 100%;
}

.jbxx {
    background-color: #ffffff;
    width: 100%;
    height: 13%;
    border-radius: 20px;
}

.pzlc {
    background-color: #ffffff;
    margin-top: 10px;
    width: 100%;
    height: 35%;
    border-radius: 20px;
}

.bgxs {
    background-color: #ffffff;
    margin-top: 10px;
    width: 100%;
    height: 49%;
    display: flex;
    /* 启用Flexbox布局 */
    border-radius: 20px;
}

.bg {
    margin: 10px;
    /* 内边距 */
    width: 33%;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-button {
    height: 40px;
    width: 100px;
    border-radius: 10px;
}

.eltable {
    height: 88%;
}

.gylx>.el-input {
    width: 200px;
    padding-left: 20px;
}

.gylx>.el-select {
    width: 200px;
    padding-left: 20px;
}


.gylx>.el-text {
    width: 120px;
    padding-left: 100px;
}

.process-flow {
    height: 30%;
    border: 1px solid skyblue;
    margin: 20px;
    border-radius: 10px;
}

.gylx {
    display: flex;
    padding-top: 20px;
}

.lxlc {
    display: flex;
}

.lxlc>* {
    width: 300px;
    margin-top: 20px;
}

.lxlc>.el-text {
    padding-left: 100px;
    width: 80px;
}

.arrow-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* 根据需要调整容器高度 */
}

.arrow {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    /* 左边框透明 */
    border-right: 20px solid transparent;
    /* 右边框透明 */
    border-top: 40px solid lightblue;
    /* 上边框设置箭头颜色和大小 */
}
</style>